<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <style>
        #flvjsVideo,
        #hlsjsVideo {
            width: 500px;
            display: block;
            border: 1px #000 solid;
        }
    </style>
    <script src="flv.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <link rel="stylesheet" href="videojs/video-js.min.css">
    <script src="videojs/video.min.js"></script>
</head>
<body>
播放类型：
<label>
    <input name="player-type" value="flv" type="radio" checked>
    flv
</label>
<label>
    <input name="player-type" value="m3u8" type="radio">
    m3u8
</label>
<label>
    <input name="player-type" value="hls" type="radio">
    hls
</label>
<br/>
频道：
<input type="text" name="liveChannel" value="live-"/>
<button onclick="play()">播放</button>

<h3>flv</h3>
<video id="flvjsVideo" controls webkit-playsinline="true" playsinline="true"></video>

<h3>m3u8</h3>
<video id="videojsVideo" class="video-js vjs-default-skin" data-setup='{"fluid": true}' controls webkit-playsinline="true" playsinline="true"></video>

<h3>hlsjs</h3>
<video id="hlsjsVideo" controls webkit-playsinline="true" playsinline="true" preload="true"></video>
<script>
    let flvPlayer, m3u8Player, hls;

    function play() {
        let liveChannel = document.querySelector("input[name='liveChannel']").value;
        if (!liveChannel) {
            return;
        }

        let playerType = document.querySelector("input[name='player-type']:checked");
        if (!playerType) {
            return;
        }
        playerType = playerType.value;

        fetch("/loadPlayUrl?liveChannel=" + liveChannel).then(resp => {
            resp.json().then(data => {
                if (flvPlayer) {
                    flvPlayer.destroy();
                    flvPlayer = null;
                }
                if (m3u8Player) {
                    m3u8Player.pause();
                    m3u8Player = null;
                }
                if (hls) {
                    hls._media.pause();
                    hls.destroy();
                    hls = null;
                }

                if (playerType == "flv") {
                    flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        url: data["flv"]
                    });
                    flvPlayer.attachMediaElement(document.querySelector("#flvjsVideo"));
                    flvPlayer.load();
                    flvPlayer.play();
                }

                if (playerType == "m3u8") {
                    m3u8Player = videojs(document.querySelector("#videojsVideo"), {
                        autoplay: true,
                        liveui: true,
                        width: "500px",
                    });
                    m3u8Player.src({src: data["m3u8"]});
                    m3u8Player.play()
                }

                if (playerType == "hls") {
                    hls = new Hls();
                    hls.loadSource(data["m3u8"]);
                    hls.attachMedia(document.querySelector("#hlsjsVideo"));
                    hls.on(Hls.Events.MANIFEST_PARSED, function () {
                        hls._media.play();
                    })

                }
            })
        });
    }
</script>
</body>
</html>